<template>
  <view class="x-search">
    <x-input
      class="x-search-input"
      :value.sync="inputValue"
      :placeholder="placeholder"
      size="small"
      :text-align="textAlign"
      clear
      round
      :disabled="disabled"
      prefixIcon="icon-012"
      background="#F7F8FA"
      :maxlength="maxlength"
      :confirm-type="confirmType"
      :readonly="readOnly"
      @input="onInput"
      @focus="onFocus"
      @clear="onClear"
      @blur="onBlur"
      @confirm="onConfirm"/>
      <view v-if="rightText" class="_title" @click="onConfirm">
        {{rightText}}
      </view>
  </view>
</template>

<script>
import XInput from '@/components/x-input';
export default {
  name: 'XSearch',
  components: {
    XInput
  },
  props: {
    value: {
      type: String,
      default: 'left'
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    // 对齐方式
    textAlign: {
      type: String,
      default: 'left'
    },
    rightText: {
      type: String,
      default: ''
    },
    // 后缀清除按钮
    clear: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '搜索'
    },
    placeholderClass: {
      type: String,
      default: 'input-placeholder'
    },
    password: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    focus: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: [Number, String],
      default: 140
    },
    // 设置键盘右下角按钮的文字
    confirmType: {
      type: String,
      default: 'done'
    }
  },
  data() {
    return {
      inputValue: ''
    };
  },
  computed: {

  },
  watch: {
    value(val) {
      this.inputValue = val;
    }
  },
  created() {},
  mounted() {

  },
  methods: {
    onInput(value) {
      this.inputValue = value;
      this.$emit('update:value', value);
      this.$emit('input', this.inputValue, value);
    },
    onFocus() {
      this.$emit('focus', this.inputValue);
    },
    onBlur() {
      this.$emit('blur', this.inputValue);
    },
    onConfirm() {
      console.log(this.inputValue);
      this.$emit('confirm', this.inputValue);
    },
    onClear() {
      this.inputValue = '';
      this.$emit('update:value', this.inputValue);
      this.$emit('clear', this.inputValue);
    }
  }
};
</script>

<style lang="scss" scoped>
.x-search{
  width: 100%;
  display: flex;
  align-items: center;
  //background: #ffffff;
  padding: 20px 24px;
  .x-search-input{
    flex: 1;
  }
  .input-placeholder{
    text-align: center;
  }
  ._title{
    font-size: $uni-font-size-lg;
    color: $uni-color-default;
    padding: 0 16px 0 16px;
  }
}
</style>
